<template>
	<view class="merchant-view">
		<TopHead :title="'商品列表'"></TopHead>
		<view class="conbox">
			<swiper class="index-section-swiper" :indicator-dots="true" indicator-color="#BFCFFD"
				indicator-active-color="#CF712B" circular>
				<swiper-item class="swiper-item" v-for="(item,index) in storeInfo.bannerList" :key="index">
					<image :src="path+item.resUrl" mode="" class="cell-icon"></image>
				</swiper-item>

			</swiper>
			<view class="diandian">
				<image class="dian-img" :src="path+storeInfo.avatar"></image>
				<view class="dian-view">
					<view class="dian-title1">
						{{storeInfo.name}}
					</view>
					<view class="dian-title2">
						{{storeInfo.info}}
					</view>
				</view>
			</view>
			<view class="list">
				<view class="title1">
					<text></text>
					<text>商品列表</text>
				</view>
				<view class="list-cont">
					<view class="left-bar">
						<view class="left-bar-item" :class="typeId==item.id?'active':''" @click="toTab(item,index)"
							v-for="(item,index) in storeInfo.productEntityClassfiyList" :key="index">
							{{item.classfiyName}}
						</view>
					</view>
					<view class="right-cont">
						<view class="item-box" v-for="(item,index) in goodsList" :key="index" @click="toGoodsdetails(item)">
							<image class="item-box-img" :src="path+item.logo"></image>
							<view class="item-box-text">
								<view class="">{{item.name}}</view>
								<view>
									<text v-for="(ite,i) in item.tagList" :key="i">{{ite}}</text>
								</view>
								<view>
									<text>￥</text>
									{{(item.price/100 || 0).toFixed(2)}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopHead from '../../components/topHead/topHead.vue';
	export default {
		components: {
			TopHead
		},
		data() {
			return {
				path: this.$http.tpUrl+'/' , // 图片前缀	
				tabbar: [
				],
				goodsList: [
					// {name:'豆浆稀饭',tagList:['安全健康','营养'],price:25,id:0},
					// {name:'油条豆浆',tagList:['安全健康','营养'],price:32,id:1},
					// {name:'皮蛋瘦肉粥',tagList:['安全健康','营养'],price:27,id:2},
					// {name:'包子',tagList:['安全健康','营养'],price:29,id:3},
					// {name:'馒头稀饭',tagList:['安全健康','营养'],price:20,id:4},
				],
				inxid: 0, // 
				storeId:'', // 
				storeInfo:{}, // 
				path: this.$http.tpUrl + '/', // 图片前缀
				typeId:"", // 类型id
			}
		},
		onLoad(options) {
			console.log(options)
			this.storeId = options.id
			
		},
		onShow() {

			this.initData()
		},
		
		onReachBottom() {
			// 触底分页
			console.log('触底')
			// if (this.total > this.list.length) {
			// 	this.page = parseInt(this.page) + 1
			// }
		},
		methods: {
			// 数据请求示例
			initData() {
				let _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/customer/store/'+_this.storeId,
					method: 'GET',
					data: {},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						_this.storeInfo = res.data
						_this.typeId = res.data.productEntityClassfiyList[0].id
						_this.$nextTick(()=>{
							// _this.getList()
							_this.goodsList = res.data.productEntityClassfiyList[0].productEntityList
						})
					}
				})
			},
			// dianhua
			phoneCall(item) {
				uni.makePhoneCall({
					phoneNumber: '023-62433333' //仅为示例
				});
			},
			// 左侧选择
			toTab(item,index) {
				this.inxid = index
				this.typeId = item.id
				// this.getList()
				console.log(item.productEntityList)
				this.goodsList = item.productEntityList
			},
			// 获取商品
			getList(){
				let _this = this;
				_this.$http.fetchData({
					url: '/wechatApplet/customer/productEntity/'+_this.typeId,
					method: 'GET',
					data: {},
					success(res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// });
						// _this.storeInfo = res.data
						
						
					}
				})
			},
			// 去商品详情
			toGoodsdetails(item){
				let paramsStr=`?ProductEntityId=${item.productEntityId}`
				console.log(paramsStr)
				uni.navigateTo({
					url: `/pages_category_page1/goods/goodsDetails${paramsStr}`
				})
			},

		}
	}
</script>

<style scoped>
	.merchant-view {
		height: 100%;
		overflow: auto;
		background: #f3f3f3;
	}

	.headBox {
		font-size: 36rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: center;
		color: #232323;
		padding-top: 88rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 112rpx;
		background: linear-gradient(89deg, #f9d7a6 1%, #ffdc95 100%);
	}

	.headBox .wzText {
		line-height: 56rpx;
	}

	.conbox {
		padding: 30rpx;
		padding-top: 240rpx;
	}

	.index-section-swiper {
		width: 690rpx;
		height: 346rpx;
		margin-bottom: 30rpx;
	}

	.swiper-item {
		width: 690rpx;
		height: 346rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiper-item image {
		width: 690rpx;
		height: 346rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.diandian {
		display: flex;
		padding: 25rpx 20rpx;
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
	}

	.diandian .dian-img {
		width: 178rpx;
		height: 178rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
		background-color: #f3f3f3;
	}

	.dian-view {
		flex: 1;
		padding-left: 20rpx;
	}

	.dian-view .dian-title1 {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #5d4529;

	}

	.dian-view .dian-title2 {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #c2c2c2;
		margin-top: 18rpx;
	}

	/* 列表 */
	.list {
		background: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(93, 69, 41, 0.25);
		margin-top: 24rpx;
		position: relative;
	}

	.list .title1 {
		padding-top: 27rpx;
		padding-left: 22rpx;
		margin-bottom: 22rpx;
	}

	.list .title1 text:nth-child(1) {
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		background: #e47917;
		border-radius: 4rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}

	.list .title1 text:nth-child(2) {
		font-size: 28rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		color: #e47917;
	}

	.list-cont {
		display: flex;
	}

	.list .left-bar {
		width: 170rpx;
		background: #f2f2f2;
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: center;
		color: #aaaaaa;
		flex-shrink: 0;
	}

	.list .left-bar .left-bar-item {
		height: 100rpx;
		line-height: 100rpx;
	}

	.list .left-bar .active {
		background: #fff;
		color: #5d4529;
		font-weight: 700;
	}

	.list .right-cont {
		flex: 1;
		padding-left: 22rpx;
	}

	.list .right-cont .item-box {
		display: flex;
		margin-bottom: 44rpx;
	}

	.list .right-cont .item-box-img {
		width: 150rpx;
		height: 150rpx;
		flex-shrink: 0;
		border-radius: 10rpx;
		background-color: #f2f2f2;
	}
	.list .right-cont .item-box-text {
		flex: 1;
		padding-left: 25rpx;
	}
	.list .right-cont .item-box-text>view:nth-child(1){
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Bold;
		font-weight: 700;
		text-align: left;
		color: #5d4529;
	}
	.list .right-cont .item-box-text>view:nth-child(2) {
		font-size: 24rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		color: #fdab34;
		margin-top: 12rpx;
	}
	.list .right-cont .item-box-text>view:nth-child(2) text {
		display: inline-block;
		background: #fff0db;
		border-radius: 10rpx;
		margin-right: 10rpx;
		text-align: center;
		padding: 4rpx 18rpx;
	}
	.list .right-cont .item-box-text>view:nth-child(3) {
		font-size: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei-Regular;
		font-weight: 400;
		text-align: left;
		color: #f61111;
		margin-top: 16rpx;
	}
	.list .right-cont .item-box-text>view:nth-child(3) text {
		font-size: 24rpx;
	}
</style>